<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
  </head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./index.css" />
  <body>
    <div id="app">
      <el-button v-show="!startFlag" @click="createRoom">创建房间</el-button>
      <el-button v-show="!startFlag" @click="getRoomList">房间列表</el-button>
      <el-table
        v-show="!startFlag"
        border
        stripe
        :data="roomInfoList"
        style="width: 100%; text-align: center"
      >
        <el-table-column prop="hosterId" label="房主id"></el-table-column>
        <el-table-column prop="roomId" label="房间id"></el-table-column>
        <el-table-column prop="userList" label="用户列表">
          <template slot-scope="scope">
            <div
              v-for="(item,index) in scope.row.userList"
              :key="'_userList'+index"
              class=""
            >
              {{item}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="add" label="操作">
          <template slot-scope="scope">
            <el-button @click="joinRoom(scope.row.roomId)">加入房间</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="startFlag" class="room display-flex">
        <div class="flex1">
          <canvas id="game-canvas"></canvas>
        </div>
        <div class="side-info">
          <div class="">
            <el-form ref="form" :model="roomInfo" label-width="80px">
              <el-form-item label="房间id">
                <el-input :value="roomInfo.roomId"></el-input>
              </el-form-item>
              <el-form-item label="房主id">
                <el-input :value="roomInfo.hosterId"></el-input>
              </el-form-item>
              <el-form-item label="用户列表">
                <!-- <el-input :value="roomInfo.userList"></el-input> -->
                <el-tag
                  v-for="item in roomInfo.userList"
                  :key="item"
                  type="info"
                  effect="dark"
                >
                  {{ item }}
                </el-tag>
              </el-form-item>
            </el-form>
            <el-button @click="leaveRoom">退出room</el-button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import selfMoudle from "./src/index.js";
  </script>
</html>
